<template>
  <div class="parameter-config">
    <el-form :model="localConfig" label-width="120px" size="small">
      <!-- 参数选择 -->
      <el-form-item label="选择参数">
        <el-select 
          v-model="localConfig.paramCode" 
          placeholder="请选择参数"
          style="width: 100%"
          @change="handleParamChange"
        >
          <el-option
            v-for="param in availableParams"
            :key="param.code"
            :label="param.name"
            :value="param.code"
          >
            <span style="float: left">{{ param.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ param.code }}</span>
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 参数信息显示 -->
      <el-form-item v-if="localConfig.paramName" label="参数名称">
        <span>{{ localConfig.paramName }}</span>
      </el-form-item>

      <el-form-item v-if="localConfig.unit" label="参数单位">
        <span>{{ localConfig.unit }}</span>
      </el-form-item>

      <!-- 显示格式 -->
      <el-form-item label="显示格式">
        <el-radio-group v-model="localConfig.format">
          <el-radio label="value">仅数值</el-radio>
          <el-radio label="valueWithUnit">数值+单位</el-radio>
          <el-radio label="nameValue">参数名+数值</el-radio>
          <el-radio label="full">完整显示</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 数值精度 -->
      <el-form-item v-if="localConfig.dataType === 'number'" label="小数位数">
        <el-input-number 
          v-model="localConfig.precision" 
          :min="0" 
          :max="6" 
          controls-position="right"
        />
      </el-form-item>

      <!-- 计算参数设置 -->
      <el-form-item v-if="localConfig.paramType === 'calculation'" label="计算表达式">
        <el-input
          v-model="localConfig.calculationExpr"
          placeholder="请输入计算表达式，如: param1 + param2"
          type="textarea"
          :rows="3"
        />
        <div class="help-text">支持使用其他参数编码作为变量，如: {{param1}} + {{param2}} * 0.5</div>
      </el-form-item>
    </el-form>

    <div class="editor-actions">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ParameterConfig',
  props: {
    paramConfig: {
      type: Object,
      default: () => ({
        paramCode: '',
        paramName: '',
        format: 'value',
        precision: 2,
        unit: '',
        dataType: 'number',
        paramType: 'normal'
      })
    },
    availableParams: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      localConfig: JSON.parse(JSON.stringify(this.paramConfig))
    }
  },
  methods: {
    handleParamChange(paramCode) {
      const selectedParam = this.availableParams.find(p => p.code === paramCode)
      if (selectedParam) {
        this.localConfig.paramName = selectedParam.name
        this.localConfig.unit = selectedParam.unit || ''
        this.localConfig.dataType = selectedParam.dataType || 'number'
        this.localConfig.paramType = selectedParam.paramType || 'normal'
      }
    },
    
    save() {
      this.$emit('save', this.localConfig)
    },
    
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>
.parameter-config {
  padding: 20px;
}

.help-text {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.editor-actions {
  text-align: right;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e6e8eb;
}
</style>